<template>
	<view class="w-full h-full">
		<view class="titleStyPOs">
			<div style="height:30rpx"></div>
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<Title :title="title" />
		</view>
		<!-- <view :style="{height:(statusBarHeight + 30)  + 'px'}"></view> -->
		<view class="v_content" :style="`paddingTop: calc(${statusBarHeight}px + 100rpx) `" >
			<view class="v_list_item flex-col mt-20" v-for="(item,index) in videoList" :key="item.id" >
				<view class="title fz28 ml-24 ">{{ item[plang('title')] }}</view>
				<view class="v_video ml-24 ">
					<video id="myVideo" class="w100p video_wrap" :src="langR == 'zh' ? item.video : item.videos" 
					 :show-center-play-btn="false" object-fit="contain"  play-btn-position="center"
									:controls="false" >
						</video>

						<cover-view v-show="isShow" class="pa play_wrap" @click="plays(langR == 'zh' ? item.video : item.videos)">
							<view class="icon_wrap">
								<u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
							</view>
						</cover-view>
				</view>
				
			</view>
			<u-empty :text="$t('暂无相关数据')" mode="order" v-if="!videoList.length" ></u-empty>
			<view v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">{{$t('没有更多了')}}</view>
		</view>

	
		<!-- 视频放大 -->
		<uni-popup ref="videoPopup" class="video_pop" @change="editPop" mask-background-color="rgba(0,0,0,1)">
			<view class="w100p">
				<!-- @click="stopVideo"
				  -->
				<video id="myVideo1" class="w100p video_wrap"  ref="myVideo1" :src="commonVideo" @play="playVideo()" @pause="endVideo()" @ended="endVideo()"
				@fullscreenchange="handleFullScreenChange"	:show-center-play-btn="false" object-fit="contain" @error="videoErrorCallback" play-btn-position="center" >
				</video>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Title from './../components/title.vue'
	import { tutorialList } from '@/api/basic'
	export default {
		components: {
			Title
		},
		data() {
			return {
				isShow: true, // 播放按钮是否显示
				commonVideo: "",
				videos: null,
				title:this.$t('视频教程'),
				nomore: false,
				paramsList: {
					user_id:'',
					page: 1,
					limit: 100,
				},
				currentPage: 0,
				currentPlayIndex:-1,
				popupVideo:false,
				
				 videoList:[],
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				
			}
		},
		mounted(){
			this.paramsList.user_id = uni.getStorageSync('user_id')			
			this.getList()
		},
	  created(){
		this.videos = uni.createVideoContext('myVideo1');
	  },
	  	//下拉刷新
		  onPullDownRefresh() {
				this.getList(true)
			},
			//上拉加载
			onReachBottom() {
				if (this.currentPage > this.paramsList.page) {
					this.paramsList.page++;
					this.getList()
				} else {
					this.nomore = true;
				}
		
			},
		methods: {
				// 视频中间播放按钮
			plays(video) {

				this.commonVideo = video;
				this.isShow = false;
				this.$refs.videoPopup.open();
				this.$nextTick(() => {
					this.videos.play()
					this.videos.requestFullScreen();
				})
			},
			handleFullScreenChange(e){

				if (e.detail.fullScreen == false){
					this.videos.pause()
					this.isShow = true;
					this.$refs.videoPopup.close();
				}
				
			},
			// 播放视频
			playVideo() {
				this.isShow = false;
				this.stopTouchMove = true;
			},
		// 监听视频停止播放
		endVideo() {
				this.isShow = true;
				
			},
			// 停止播放
			stopVideo() {
				this.videos.pause();
				this.isShow = true;
				this.$refs.videoPopup.close();
			},
			// 视频错误回调
			videoErrorCallback: function(e) {
				uni.showModal({
					confirmText: this.$t("确定"),
        	cancelText: this.$t("取消"),
					content: e.target.errMsg,
					showCancel: false
				})
			},
			editPop(e) {
				if (!e.show) {
					this.videos.pause();
					this.isShow = true;
					
				}
			},



		
			getList(init){
				uni.showLoading({
					title: this.$t('加载中'),
					mask: true
				})
				if (init) {
					this.paramsList.page = 1
					this.nomore = false;
				}
				
				tutorialList(this.paramsList).then(res => {
					res.data.data.list = res.data.data.list.map((ele)=> {
						ele.bfImg = false;
						return ele;
					})
					res.data.data.list = res.data.data.list.filter(item => this.langR == 'zh' ? item.video : item.videos)
					if (this.paramsList.page == 1) {
						this.videoList = res.data.data.list
					} else {
						this.videoList = [...this.videoList, ...res.data.data.list]
					
					}
					uni.hideLoading()
					if (res.data.data.length == 0) {
						this.nomore = true;
					}
					// 结束下拉刷新
					uni.stopPullDownRefresh()
				})
			},
			
			
			
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	page {
		background-color: #F6F7FB;
	}
	.titleStyPOs {
		position: fixed;
		background-color: #F6F7FB;
		width: 100%;
		z-index: 10;
		top: 0;
	}
	.v_content{
		width: 702rpx;
		height: 100%;
		margin: 0 auto ;
		// padding-top: 50rpx;
		.v_list_item{
			background-color: #ffffff;
			border-radius: 26rpx;
			.title{
				padding: 20rpx 0;
				color: #0E0E0E;
				font-family: "PingFang SC";
				font-style: normal;
				font-weight: 500;
				line-height: 28px;
			}
			.v_video{
				width: 654rpx;
    			height: 408rpx;
				border-radius: 26rpx;
				position: relative;
				margin-bottom: 20rpx;
				video{
					width: 100%;
    				height: 100%;
					border-radius: 26rpx;
				}
				.video_open{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					width: 100rpx;
					height: 100rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	

	.video_wrap {
			// height: 100%;
		}
		.play_wrap {
			width: 100%;
			height: 100%;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.icon_wrap {
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			padding-top: 28rpx;
			background: rgba(217, 217, 217, 0.6);
			border-radius: 100%;

			.u-icon--right {
				padding-left: 8rpx;
			}
		}
		.video_pop {
	width: 100%;
	height: 100%;
	z-index: 999;

	::v-deep .uni-popup__wrapper.center {
		width: 100%;
		padding: 20rpx;
	}
}

.video_pop {
	::v-deep .uni-popup__wrapper.center {
		padding: 0;
	}
}
/deep/ .uni-video-video{
	width: 100% !important;
	height: 100% !important;
}
.w100p{
	height: 100vh;
}
</style>
